<template>
	<div>
		<p class="header-tip" v-if="userInfo.level == 0">
			<span class="fl">您未成为创享会员，无法享受分润收益</span>
			<router-link to="/order/buyMembership" class="fr colored textRight">成为创享会员</router-link>
		</p>
		<div id="member_container">
			<div id="member_header_container">
				<span v-for="r in ranks"
					:class="{active: activeRank === r.id}"
					@click = "clickRank(r)">{{r.title}}</span>
			</div>
			<div id="member_content_container">
				<div class="layer layer1">
		            <span>微信号</span><span>子会员数</span><span>分润（元）</span>
		        </div>
		        <div v-for="m in members" v-show="!membersAjaxing">
		        	<div class="layer layer1">
		        		<span class="ellipsis">{{m.nickname}}</span>
		        		<span>{{m.num}}</span>
		        		<span>{{m.sum}}</span>
		        	</div>
		        	<div v-for="d in m.downs" class="layer layer2">
		        		<div class="layer2-inner">
		        			<span class="ellipsis">{{d.nickname}}</span>
		        			<span>{{d.num}}</span>
		        			<span>{{d.sum}}</span>
		        		</div>
		        	</div>
		        </div>
		        <div style="margin-top: 1rem">
		        	<NormalTip v-if="!members.length && !membersAjaxing">暂无数据</NormalTip>
		        	<NormalTip v-show="membersAjaxing">加载中…</NormalTip>
		        </div>
			</div>
		</div>
	</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import Inviter from '@/components/Inviter'
import NormalTip from '@/components/NormalTip'
export default{
	name: 'Members',
	created(){
		this.triggerGetMembers()
	},
	data(){
		return{
			ranks:[{
				title:'时间排序',
				id: 2
			},{
				title:'子会员数',
				id: 4
			},{
				title:'分润排序',
				id: 6
			}],
			activeRank: 2
		}
	},
	computed:{
		...mapGetters({
			members: 'member/members',
			membersAjaxing: 'member/membersAjaxing',
			upper: 'member/upper',
			userInfo:'user/userInfo'
		})
	},
	methods:{
		...mapActions({getMembers: 'member/getMembers'}),
		triggerGetMembers(){
			this.getMembers(this.activeRank)
		},
		clickRank(r){
			this.activeRank = r.id
			this.$store.commit('member/clearMembers')
			this.triggerGetMembers()
		}
	},
	components:{Inviter, NormalTip}
}
</script>
<style lang='less' scoped>
.header-tip{
	padding: 0 .2rem;
    background: #fff599;
}
#member_container{
	background: #fff;
	margin-top: 0.19rem;
	padding: .3rem 0;
}
#member_header_container{
	margin: 0 auto;
    border: 1px solid #FF4040;
    border-radius: 0.11rem;
    width: 7.79rem;
    overflow: hidden;
    height: 0.85rem;
    line-height: .85rem;
    span{
    	text-align: center;
    	font-size: 0.4rem;
    	color: #333;
    	float: left;
    	width: 33.3%;
    	border-right: 1px solid #ff4040;
    	&.active{
    		background: #ff4040;
    		color: #fff;
    	}
    }
}
#member_content_container {
    margin-top: .4rem;
    padding-left: .4rem;
    text-align: center;
    font-size: 0.35rem;
    color: #333333;
    min-height: 4rem;
    .layer{
    	overflow: hidden;
	    height: 0.8rem;
	    line-height: .8rem;
	    position: relative;
    }
    .layer1{
    	border-bottom: 1px solid #e3e3e3;
    	span{
    		float: left;
    		&:first-of-type{
    			width: 35%;
    			text-align: left;
    		}
    		&:nth-of-type(2){
    			width: 30%;
    		}
    		&:nth-of-type(3){
    			width: 30%;
    		}
    	}
    }
    .layer2{
    	padding-left: 1rem;
    	.layer2-inner{
    		border-bottom: 1px solid #e3e3e3;
    		overflow: hidden;
    		height: 99%;
    		span{
    			float: left;
    			&:first-of-type{
    				width: 29%;
    				text-align: left;
    			}
    			&:nth-of-type(2){
    				width: 32%;
    			}
    			&:nth-of-type(3){
    				width: 33%;
    			}
    		}
    	}
    }
}
</style>
